<template>
  <div id="wrapper">
    <div id="main">
        <Navigation></Navigation>
        <div style="padding:0 50px;" v-if="isRouterAlive">
          <router-view v-slot="{ Component }">
            <transition name="MainFade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>

        <KBlock lines="1"></KBlock>

        <footer align="center" style="font-family: 'Roboto Slab', serif;">
          FrameWork Vue3 
          <el-divider direction="vertical" content-position="center"></el-divider>
          FE & BE BY <a href="http://blog.peacesheep.xyz/" target="_blank">Peacesheep</a>
          <el-divider direction="vertical" content-position="center"></el-divider>
          Designed & Remaked BY <a href="https://锦恢.studio" target="_blank">锦恢</a>
        </footer>

        <!-- prevent render error on narrow screen -->
        <KBlock lines="2"></KBlock>
    </div>
  </div>

</template>

<script>
import "@/assets/css/main.css";
import Navigation from "@/components/Navigation"
import { useStore } from "vuex"
import { parseRGBA, rgb2hsv, hsv2rgb } from "@/hook/colormap"
import { get_cookie, show_cookie } from "@/hook/cookie"
import { onMounted, computed } from "vue"
import { ElNotification } from "element-plus"

export default {
  name: 'App',
  components : {
    Navigation
  },
  setup() {
    let store = useStore()

    onMounted(() => {
      store.dispatch("queryInfo").then(function() {
        setTimeout(() => {
          if (store.state.hasLogin) {
            ElNotification({title : "欢迎回来 " + store.state.login.name})
          }
          else {
            ElNotification({title : "你好像还没有登录", message: "点击右上角的LOG IN进行登录吧！如果没有账号，可以通过最右上角的ENROLL注册哟！（虽然好像ENROLL被我挡住了hhh）"})
          }
        }, 3000)
      })
    })
    
    // 准备好了，删除载入动画
    let loadingCartoon = document.getElementById("LoadingCartoon");
    if (loadingCartoon) loadingCartoon.remove();

    // 读取配置信息
    store.dispatch("getConfig").then(() => {
      let rgb = parseRGBA(store.state.curGlobalColor);
      let red = rgb[0],
        green = rgb[1],
        blue = rgb[2];
      let shadowRgba = `rgba(${Math.min(255, red + 50)}, ${Math.min(
        255,
        green + 50
      )}, ${Math.min(255, blue + 50)}, 0.99)`;
      let transplateRgba = `rgba(${red}, ${green}, ${blue}, 0.1)`;

      let hsv = rgb2hsv([red, green, blue]);
      hsv[1] = 0.05;
      rgb = hsv2rgb(hsv);
      let lightRgba = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.7)`;

      document.body.style.setProperty("--mainColor", store.state.curGlobalColor);
      document.body.style.setProperty("--shadowColor", shadowRgba);
      document.body.style.setProperty("--transplantColor", transplateRgba);
      document.body.style.setProperty("--lightColor", lightRgba);
      document.body.style.setProperty("--el-color-primary", store.state.curGlobalColor);
      document.body.style.setProperty("--backTransplate", store.state.opacity)
      document.body.style.backgroundImage = `url(${store.state.backgroundImg})`
      ElNotification({title: "配置信息已恢复"})
    })


    let isRouterAlive = computed(() => store.state.isRouterAlive)
    return {
      isRouterAlive
    }
  },
}
</script>

<style>
:root {
  --MainDuring : .35s;
}

.MainFade-enter-from,
.MainFade-leave-to {
  opacity: 0;
}
.MainFade-enter-to,
.MainFade-leave-from {
  opacity: 1;
}
.MainFade-enter-active,
.MainFade-leave-active {
  transition: opacity var(--MainDuring);
  -moz-transition: opacity var(--MainDuring);
  -webkit-transition: opacity var(--MainDuring);
}
</style>
